<template>
  <view class="commentList">
    <view class="evaluateList">
      <view class="evaluateItem" v-for="(item, index) in list" :key="index">
        <view class="head">
          <view class="user">
            <image :src="item.avatar_url"></image>
            <text>{{ item.nickname }}</text>
          </view>
          <text class="time">
            {{ item.addtime }}
          </text>
        </view>
        <view class="content">
          <view class="score">
            <view class="starList">
              <text
                class="iconfont icon-collection-fill"
                v-for="item in item.score - 0"
                :key="item"
              ></text>
            </view>
            <text class="line"></text>
            <view class="skuList">
              <text v-for="(sku, skuIndex) in item.attr" :key="skuIndex"
                >{{ sku.attr_group_name }}{{ sku.attr_name
                }}{{ skuIndex == item.attr.length - 1 ? "" : "，" }}</text
              >
            </view>
          </view>
          <view class="evaluateContent">{{ item.content }}</view>
          <view
            class="picList"
            v-if="item.pic_list && item.pic_list.length > 0"
          >
            <view
              class="picItem"
              v-for="(pic, picIndex) in item.pic_list"
              :key="picIndex"
            >
              <image
                :src="pic"
                alt=""
                @click="preview(picIndex, item.pic_list)"
              />
            </view>
          </view>
          <view
            v-if="item.reply_content"
            style="
              background: #f0f0f0;
              padding: 20rpx;
              font-size: 24rpx;
              border-radius: 14rpx;
              color: #000000;
            "
          >
            <text style="color: #ff6247">{{ $t("goods.reply") }}：</text
            >{{ item.reply_content }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  computed: {},
  methods: {
    // 点击评价图片预览图片
    preview(index, list) {
      uni.previewImage({
        current: index,
        urls: list,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.evaluateList {
  padding: 0 30rpx;
  background-color: #fff;
}
.evaluateItem {
  border-bottom: 1px solid #f2f2f2;
  font-family: PingFang SC;
  padding: 36rpx 0;
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .user {
      display: flex;
      align-items: center;
      image {
        width: 58rpx;
        height: 58rpx;
        border-radius: 30rpx;
      }
      text {
        font-size: 30rpx;
        color: #262626;
        font-weight: 600;
        margin-left: 14rpx;
      }
    }
    .time {
      font-size: 24rpx;
      color: #8c8c8c;
    }
  }
  .content {
    margin-top: 30rpx;
    .score {
      display: flex;
      align-items: center;
      .starList {
        display: flex;
        color: #f84e18;
        font-size: 32rpx;
        text {
          margin-right: 6rpx;
        }
      }
      .line {
        width: 1px;
        height: 12rpx;
        background-color: #d2d2d2;
        margin: 0 16rpx 0 10rpx;
      }
      .skuList {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #8c8c8c;
      }
    }
    .evaluateContent {
      font-size: 30rpx;
      color: #262626;
      font-weight: 500;
      margin-top: 20rpx;
    }
    .picList {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .picItem {
        width: 164rpx;
        height: 164rpx;
        margin-right: 4rpx;
        margin-top: 20rpx;
        overflow: hidden;
        border-radius: 12rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .picitem:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
}
</style>